import { ref } from 'vue'

export function useCategoryLines() {
  const dataset = ref({
    dimensions: ['time', 'server', 'application', 'switch'],
    source: [
      { time: '00:00', server: 120, application: 220, switch: 150 },
      { time: '00:10', server: 132, application: 182, switch: 232 },
      { time: '00:20', server: 101, application: 191, switch: 201 },
      { time: '00:30', server: 134, application: 234, switch: 154 },
      { time: '00:40', server: 90, application: 290, switch: 190 },
      { time: '00:50', server: 230, application: 330, switch: 330 },
      { time: '01:00', server: 210, application: 310, switch: 410 },
    ],
  })

  const options = ref({
    title: {
      text: '服务器、应用、交换机折线图',
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: ['服务器', '应用', '交换机'],
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
    },
    yAxis: {
      type: 'value',
    },
    dataset: dataset.value,
    series: [
      { name: '服务器', type: 'line' },
      { name: '应用', type: 'line' },
      { name: '交换机', type: 'line' },
    ],
  })

  return { options }
}
